<template>
  <div class="leftrightformat">
    <!-- 默认图文样式 -->
    <section v-show="!datas.imageList || !datas.imageList[0]" class="defaultcommodity">
      <div
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 4 ? 'defaultcommodityList4' : '',
          datas.commodityType === 6 ? 'defaultcommodityList6' : '',
          datas.commodityType === 7 ? 'defaultcommodityList7' : '',
        ]"
        :style="{
          'border-radius': datas.borderRadius + 'px',
          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
          'box-shadow': datas.moditystyle === 0 ? '0 2px 8px rgba(93,113,127,0.08)' : '',
        }">
        <div class="contentlist" v-for="index in 4" :key="index">
          <!-- 图片 -->
          <div class="imgss">
            <div class="imgtop">
              <img draggable="false" style="border-radius:8px;" src="../../../assets/images/imgs.png" alt="" />
            </div>
            <div class="imgtxt">
              <p v-show="datas.commodityType === 1">场景</p>
              <!-- 阅读量 -->
              <div class="dianz" v-show="datas.readNumberShow && datas.commodityType === 1 || datas.commodityType === 2 || datas.commodityType === 4">
                <img src="../../../assets/images/play.png" alt="">
                <span>{{ datas.count }}万</span>
              </div>
            </div>
            <div class="textnum" v-show="datas.courseNumberShow">
              <!-- 课时数 -->
              <div class="dianz">
                <span>共{{ datas.courseNum }}节</span>
              </div>
            </div>
            <div class="flagtxt" v-show="datas.commodityType === 2 || datas.commodityType === 6">限时折扣</div>
            <div class="vipicon" v-show="datas.commodityType !== 0">
              <img src="../../../assets/images/jiaobiao.png" alt="">
            </div>
          </div>
          <!-- 文字内容 -->
          <div
            class="text"
            :style="{ background: datas.moditystyle !== 3 ? '#fff' : 'none' }"
            v-show="datas.commodityType != 0">
            <!-- 名称 -->
            <h5>这里显示名称,最多显示2行</h5>
            <!-- 描述 -->
            <p v-show="datas.commodityType === 1 || datas.commodityType === 2 || datas.commodityType === 4 || datas.commodityType === 6">这里显示描述</p>
            <div class="botflag" v-show="datas.commodityType === 1 || datas.commodityType === 4 || datas.commodityType === 6 || datas.commodityType === 7">
              <span>标签名称1</span>
              <span>标签名称2</span>
            </div>
            <!-- 学习量2 -->
            <!-- <div class="studynum" v-show="datas.readNumberShow">
              <img src="../../../assets/images/playgreen.png" alt="">
              <span>{{ datas.count }}万人已学</span>
            </div> -->
            <div class="btntext" v-show="datas.commodityType !== 2">
              <p><span>￥</span>68.8</p>
              <div class="btnbuy" v-show="datas.commodityType === 1 || datas.commodityType === 4 || datas.commodityType === 6 || datas.commodityType === 7">立即抢购</div>
              <!-- <div class="button-bot" v-show="datas.commodityType === 2">抢</div> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 图文样式 -->
    <section v-show="datas.imageList && datas.imageList[0]" class="defaultcommodity">
      <div
        class="defaultcommodityList"
        :class="[
          datas.commodityType === 0 ? 'defaultcommodityList0' : '',
          datas.commodityType === 1 ? 'defaultcommodityList1' : '',
          datas.commodityType === 2 ? 'defaultcommodityList2' : '',
          datas.commodityType === 4 ? 'defaultcommodityList4' : '',
          datas.commodityType === 6 ? 'defaultcommodityList6' : '',
          datas.commodityType === 7 ? 'defaultcommodityList7' : '',
        ]"
        :style="{
          'border-radius': datas.borderRadius + 'px',
          border: datas.moditystyle === 2 ? '1px solid rgba(50,50,51,0.1)' : '',
          'box-shadow': datas.moditystyle === 0 ? '0 2px 8px rgba(93,113,127,0.08)' : ''
        }">
        <div class="contentlist" v-for="(item, index) in datas.imageList" :key="index">
          <!-- 图片 -->
          <div class="imgss" :class="[datas.positions === 'top' ? 'containoptions' : '']">
            <div class="imgtop">
              <img v-if="!item.src" style="border-radius:8px;" src="../../../assets/images/imgs.png" />
              <img v-else draggable="false" style="border-radius:8px;" :src="item.src" alt="" />
            </div>
            <div class="imgtxt">
              <p v-show="datas.commodityType === 1">{{ item.studyStatus }}</p>
              <!-- 阅读量 -->
              <div class="dianz" v-show="datas.readNumberShow && datas.commodityType === 1 || datas.commodityType === 2 || datas.commodityType === 4">
                <img src="../../../assets/images/play.png" alt="">
                <span>{{ datas.count }}万</span>
              </div>
            </div>
            <div class="textnum" v-show="datas.courseNumberShow">
              <!-- 课时数 -->
              <div class="dianz">
                <i class="el-icon-video-play"></i>
                <span>共{{ item.courseNum || 0 }}节</span>
              </div>
            </div>
            <div class="flagtxt" v-show="datas.commodityType === 2">
              <span v-if="item.hasOwnProperty('flagTagsArr')">{{ item.flagTagsArr[0] }}</span>
              <span v-else>标签名称</span>
            </div>
            <div class="vipicon" v-show="datas.commodityType !== 0 && item.isVipShow === 1">
              <img src="../../../assets/images/jiaobiao.png" alt="">
            </div>
          </div>
          <!-- 文字内容 -->
          <div
            class="text"
            :style="{ background:datas.moditystyle !== 3 ? '#fff' : 'none' }"
            v-show="datas.commodityType != 0">
            <div class="textTitle">
              <!-- 名称 -->
              <h5>{{ item.text }}</h5>
              <!-- 描述 -->
              <p v-show="datas.commodityType == 1 || datas.commodityType === 2 || datas.commodityType == 4 || datas.commodityType == 6">{{item.desc}}</p>
              <div class="botflag" v-show="datas.commodityType === 1 || datas.commodityType === 4 || datas.commodityType === 6 || datas.commodityType === 7">
                <span v-for="(ite, ind) in item.flagTagsArr" :key="ind">{{ ite }}</span>
              </div>
              <!-- 学习量2 -->
              <!-- <div class="studynum" v-if="datas.readNumberShow && datas.commodityType == 3">
                <img src="../../../assets/images/playgreen.png" alt="">
                <span>{{ datas.count }}万人已学</span>
              </div> -->
            </div>
            <div class="btntext" v-show="item.showPrice === 1 && datas.commodityType !== 2">
              <p><span>￥</span>68.8</p>
              <div class="btnbuy" v-show="datas.commodityType === 1 || datas.commodityType === 4 || datas.commodityType === 6 || datas.commodityType === 7">{{ item.btnText || '立即体验'}}</div>
              <!-- <div class="button-bot" v-show="datas.commodityType === 2">{{ item.btnText || '抢'}}</div> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: "Leftrightformat",
  props: {
    datas: Object,
  },
  data() {
    return {
      active: 0,
    };
  },
  created() {},
};
</script>

<style scoped lang="scss">
.leftrightformat {
  position: relative;
  .defaultcommodity {
    box-sizing: border-box;
    /* 列表 */
    .defaultcommodityList {
      padding: 0 10px;
      /* 一行一个 */
      &.defaultcommodityList0 {
        .contentlist{
          width: 100%;
          .imgss{
            margin-bottom: 10px;
            .imgtop{
              width: 100%;
              height: 150px;
              img{
                width: 100%;
                height: 100%;
              }
            }
          }
        } 
      }

      /* 一行两个 */
      &.defaultcommodityList1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .contentlist{
          width: 48%;
          flex-direction: column;
          margin-bottom: 15px;
          .imgss {
            position: relative;
            .imgtxt{
              width:100%;
              background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
              position:absolute;
              bottom:0;
              left:0;
              display:flex;
              justify-content:space-between;
              align-items:center;
              p{
                font-size:12px;
                color:#ffffff;
                padding-left:10px;
              }
              .dianz{
                width: 60px;
                height: 25px;
                background: rgba(0,0,0,0.33);
                border-radius: 60px 60px 60px 60px;
                display:flex;
                align-items:center;
                padding:0 5px;
                margin-right:10px;
                margin-bottom:5px;
                img{
                  width:16px;
                  // height:20px;
                  display:block;
                  margin-right:5px;
                }
                span{
                  font-size:12px;
                  color:#ffffff;
                }
              }
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
          }
          .text{
            padding: 10px;
          }
          .botflag{
            display: flex;
            align-items: center;
            margin: 10px 0;
            span{
              width: 53px;
              height: 16px;
              background: #EAEAEA;
              border-radius: 10px;
              display: block;
              text-align: center;
              line-height: 16px;
              margin-right: 6px;
              font-size: 12px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #808080;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              padding: 3px 5px;
            }
          }
          .btntext{
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F35C6D;
              span{
                font-size: 14px;
              }
            }
            .btnbuy{
              width: 100px;
              height: 25px;
              background: linear-gradient(140deg, #FFA552 0%, #FF5757 100%);
              border-radius: 62px;
              text-align: center;
              line-height: 25px;
              font-size: 11px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }
      
      /*一行三个 */
      &.defaultcommodityList2 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 200px;
        overflow: hidden;
        .contentlist{
          width: 32%;
          flex: none;
          margin-right: 2%;
          flex-direction: column;
          margin-bottom: 10px;
          &:nth-of-type(3n) {
            margin-right: 0 !important;
          }
          .imgss {
            position: relative;
            .imgtop{
              height: 105px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .imgtxt{
              // width:100%;
              // background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
              position:absolute;
              bottom: 5px;
              right: 5px;
              // display: flex;
              // justify-content:space-between;
              // align-items:center;
              .dianz{
                width: 60px;
                height: 25px;
                background: rgba(0,0,0,0.33);
                border-radius: 60px 60px 60px 60px;
                display:flex;
                align-items:center;
                padding:0 5px;
                margin-right:10px;
                margin-bottom:5px;
                img{
                  width:16px;
                  // height:20px;
                  display:block;
                  margin-right:5px;
                }
                span{
                  font-size:12px;
                  color:#ffffff;
                }
              }
            }
            .flagtxt{
              width: 52px;
              height: 16px;
              padding: 3px 5px;
              background: linear-gradient(165deg, #FF9052 0%, #FF5757 100%);
              border-radius: 0px 0px 9px 0px;
              font-size: 10px;
              font-family: MiSans-Medium, MiSans;
              font-weight: 500;
              line-height: 16px;
              color:#FFFFFF;
              text-align: center;
              position: absolute;
              left: 0;
              top: 0;
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
          }
          .text{
            padding: 10px;
          }
          .btntext{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 94px;
            height: 20px;
            background: #FFEDD8;
            border-radius: 12px;
            margin-top: 10px;
            p{
              font-size: 14px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F35C6D;
              margin-left: 5px;
              margin-top: 5px;
              span{
                font-size: 11px;
              }
            }
            .button-bot{
              width: 30px;
              height: 20px;
              background: linear-gradient(165deg, #FF9052 0%, #FF5757 100%);
              border-radius: 39px;
              font-size: 11px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              text-align: center;
              line-height: 20px;
            }
          }
        }
      }

      /* 一行两个2(弃用) */
      &.defaultcommodityList3 {
        width: 48%;
        flex-direction: column;
        &:nth-of-type(even) {
          margin-left: 4%;
        }
        // &:nth-of-type(odd) {
        //   margin-left: 0 !important;
        // }
        .text {
          padding: 0;
          h5 {
            position: absolute;
            left: 20px;
            bottom: 30px;
            width: 100px;
            text-overflow: ellipsis;
          }
        }
      }

      /* 左右版式 */
      &.defaultcommodityList4 {
        .contentlist{
          display: flex;
          padding: 10px;
          background:#ffffff;
          .imgss {
            position: relative;
            margin-right: 10px;
            img {
              width: 120px;
              height: 120px;
            }
            .imgtxt{
              position:absolute;
              bottom: 5px;
              right: 5px;
              .dianz{
                width: 60px;
                height: 25px;
                background: rgba(0,0,0,0.33);
                border-radius: 60px 60px 60px 60px;
                display:flex;
                align-items:center;
                padding:0 5px;
                margin-right:10px;
                margin-bottom:5px;
                img{
                  width:16px;
                  height:16px;
                  display:block;
                  margin-right:5px;
                }
                span{
                  font-size:12px;
                  color:#ffffff;
                }
              }
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
          }
          .botflag{
            display: flex;
            align-items: center;
            margin: 10px 0;
            span{
              width: 53px;
              height: 16px;
              background: #EAEAEA;
              border-radius: 10px;
              display: block;
              text-align: center;
              line-height: 16px;
              margin-right: 6px;
              font-size: 12px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #808080;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              padding: 3px 5px;
            }
          }
          .text {
            width: 100%;
          }
          .btntext{
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F35C6D;
              span{
                font-size: 14px;
              }
            }
            .btnbuy{
              width: 100px;
              height: 25px;
              background: linear-gradient(140deg, #FFA552 0%, #FF5757 100%);
              border-radius: 62px;
              text-align: center;
              line-height: 25px;
              font-size: 11px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }

      /* 高中同步（弃用） */
      &.defaultcommodityList5 {
        width: 48%;
        height: 60px;
        position: relative;
        background: #ffffff;
        &:nth-of-type(even) {
          margin: 0 2%;
        }
        .imgss {
          width: 42px;
          // height: 36px;
          position: absolute;
          right: 5px;
          bottom: 20px;
        }
        .text {
          width: 120px;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          h5 {
            line-height: 40px;
          }
        }
      }

      /* 书籍样式 */
      &.defaultcommodityList6 {
        .contentlist{
          display: flex;
          padding: 10px;
          background:#ffffff;
          .imgss {
            position: relative;
            margin-right: 10px;
            .imgtop{
              width: 120px;
              height: 120px;
            }
            img {
              width: 100%;
              height: 100%;
            }
            .flagtxt{
              position: absolute;
              bottom: 0;
              left: 0;
              width: 64px;
              height: 21px;
              background: linear-gradient(180deg, #FF6C6C 0%, #FF4F4F 100%);
              border-radius: 0px 8px 0px 8px;
              color:#ffffff;
              font-size: 12px;
              text-align: center;
              line-height: 21px;
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
          }
          .botflag{
            display: flex;
            align-items: center;
            margin: 10px 0;
            span{
              width: 53px;
              height: 16px;
              background: #EAEAEA;
              border-radius: 10px;
              display: block;
              text-align: center;
              line-height: 16px;
              margin-right: 6px;
              font-size: 12px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #808080;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              padding: 3px 5px;
            }
          }
          .text {
            width: 100%;
          }
          .btntext{
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F35C6D;
              span{
                font-size: 14px;
              }
            }
            .btnbuy{
              width: 100px;
              height: 25px;
              background: linear-gradient(140deg, #FFA552 0%, #FF5757 100%);
              border-radius: 62px;
              text-align: center;
              line-height: 25px;
              font-size: 11px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }

      /* 一行两个半 */
      &.defaultcommodityList7 {
        display: flex;
        display: -webkit-box;
        align-items: center;
        overflow-x: scroll;
        /* 滚动条 */
        &::-webkit-scrollbar {
          height: 5px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #FF5F54;
          border-radius: 5px;
        }
        .contentlist{
          width: 36%;
          // flex-direction: column;
          margin-right: 15px;
          .imgss {
            position: relative;
            .imgtxt{
              width:100%;
              background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
              position:absolute;
              bottom:0;
              left:0;
              display:flex;
              justify-content:space-between;
              align-items:center;
              p{
                font-size:12px;
                color:#ffffff;
                padding-left:10px;
              }
              .dianz{
                width: 60px;
                height: 25px;
                background: rgba(0,0,0,0.33);
                border-radius: 60px 60px 60px 60px;
                display:flex;
                align-items:center;
                padding:0 5px;
                margin-right:10px;
                margin-bottom:5px;
                img{
                  width:16px;
                  // height:20px;
                  display:block;
                  margin-right:5px;
                }
                span{
                  font-size:12px;
                  color:#ffffff;
                }
              }
            }
            .vipicon{
              position: absolute;
              right: 0;
              top: 0;
              width: 24px;
              height: 18px;
              img{
                width: 100%;
                height: 100%;
                border-top-right-radius: 8px;
              }
            }
          }
          .text{
            padding: 10px;
          }
          .botflag{
            display: flex;
            align-items: center;
            margin: 10px 0;
            span{
              width: 53px;
              height: 16px;
              background: #EAEAEA;
              border-radius: 10px;
              display: block;
              text-align: center;
              line-height: 16px;
              margin-right: 6px;
              font-size: 12px;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #808080;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
              padding: 3px 5px;
            }
          }
          .btntext{
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
              font-size: 18px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #F35C6D;
              span{
                font-size: 14px;
              }
            }
            .btnbuy{
              width: 100px;
              height: 25px;
              background: linear-gradient(140deg, #FFA552 0%, #FF5757 100%);
              border-radius: 62px;
              text-align: center;
              line-height: 25px;
              font-size: 11px;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
            }
          }
        }
      }

      /* 图片 */
      img {
        width: 100%;
        display: block;
        overflow: hidden;
      }

      /* 文字 */
      .text {
        // padding: 10px 6px;
        box-sizing: border-box;
        /* 名称 */
        p,
        h5 {
          font-size: 14px;
          line-height: 20px;
          margin: 0 0 5px;
          width: 100%;
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        /* 学习量 */
        .studynum{
          display:flex;
          align-items:center;
          img{
            width:16px;
            display:block;
            margin-right:5px;
          }
          span{
            font-size:12px;
            color:#666666;
          }
        }
      }
    }
  }
}
</style>
